<template>
  <div>
    <van-nav-bar
         left-arrow
        class="app-nav-bar"
        title="事件确认"
        @click-left="$router.back()"
      />
      <van-form @submit="onSubmit">
           
            <van-field
                v-model="eventContent"
                right-icon="arrow"
                label="负责人"
                placeholder="请选择负责人"
                @click="eventListShare=true"
            />
            <van-action-sheet 
                v-model="eventListShare"
                title="请选择"
                :actions="userList" 
                @select="onSelect1" 
            />
            <van-field
                v-model="handlerContent"
                right-icon="arrow"
                label="处理人"
                placeholder="请选择处理人"
                @click="handlerListShare=true"
            />
            <van-action-sheet 
                v-model="handlerListShare"
                title="请选择"
                :actions="userList" 
                @select="onSelect2" 
            />
             <van-field
                v-model="form.handlerDesc"
                label="处理描述"
                placeholder="处理描述"
                :rules="[{ required: true, message: '请填写处理描述' }]"
            />
                <van-field
                    readonly
                    right-icon="arrow"
                    label="上传照片"
                    placeholder="请选择图片"
                    @click="chooseFile"
                />
            <van-uploader
              v-model="fileList"
              :after-read="afterRead"
              :max-count="1"
              ref="file"/>
            <!-- 提交 -->
            <div style="margin:16px">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
  </div>
</template>

<script>
export default {
    name:'confirehandler',
    data(){
        return{
        // file: (二进制)
        // eventLeaderId: 1
        // handlerPersonId: 101
        // handlerDesc: 111
        // id: 1852
            fileList: [],
            userList:[],
            form:{
                eventLeaderId:null,
                handlerPersonId:null,
                handlerDesc:"",
            },
            eventListShare:false,
            handlerListShare:false,
            eventContent:"",
            handlerContent:"",
            file:null
        }
    },
     methods:{
        chooseFile(){
            this.$refs.file.chooseFile();
        },
        async onSubmit(){
            this.uploadSectionFile();
        },
        async uploadSectionFile(){
            var form=new FormData();
            form.append("file",this.file);
            // let reportpersonId=sessionStorage.getItem("set_token").split("-")[2];
            form.append("id",this.$route.params.id);
            // form.append("reportpersonId",reportpersonId);
            form.append("handlerPersonId",this.form.handlerPersonId);
            form.append("eventLeaderId",this.form.eventLeaderId);
            form.append("handlerDesc",this.form.handlerDesc);
            const {data:res} =await this.$axios({
                url:this.$location.confirehandler,
                method:'post',
                headers:{
                    "Content-Type":"multipart/form-data"
                },
                data:form
            });
            console.log(res);
            if(res.status==200){
                this.$toast.success(res.msg)
                 this.$router.push('/event');
            }else{
                this.$toast.fail(res.msg)
                 this.$router.push('/event');
            }
        },
        onSelect1(item){
            this.eventContent=item.name;
            this.form.eventLeaderId=item.id
            this.eventListShare = false;
        },
        onSelect2(item){
            this.handlerContent=item.name;
            this.form.handlerPersonId=item.id
            this.handlerListShare = false;
        },
        async getUserListAll(){
            const {data:res} =await this.$axios({url:this.$location.getUserListAll});
            res.data.forEach(item=>{
                this.userList.push({
                    id:item.id,
                    name:item.username
                })
            })
        },
         afterRead(file) {
            // 此时可以自行将文件上传至服务器
            this.file=file.file
         },
    },
    created(){
        this.getUserListAll();
    }
}
</script>

<style lang="less" scoped>
 /deep/ .app-nav-bar{
        background-color: #3296fa;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon{
            color: #fff;
        }
    }
</style>